<!-- 全选 合计 结算组件 -->
<template>
  <!-- 最外层的容器 -->
  <view class="my-checkout-container">
    
    <!-- 全选区域 -->
    <label class="radio">
      <radio color="#C00000" @click="checkedAll" :checked="ischeckedAll" />
      <text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box"> 合计:<text class="amount">￥{{ountnu}}</text> </view>

    <!-- 结算按钮 -->
    <view @click="checkout" class="btn-checkout">结算({{ jies }})</view>
    
  </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex';

export default {
  data() {
    return {
      seconds:3
    };
  },
  computed:{
    //ountnu合计,jies选中的商品数量,totalCount商品总数量
    ...mapGetters('cart',['ountnu','jies','totalCount']),
    ...mapState('user',['token']),
    ...mapGetters('user',['fullAddress']),
    ...mapState('cart',['cartItems']),
    ischeckedAll(){//布尔值
      //选中的商品数量和商品总数量相等,那么商品一定是全部选中的
      // console.log("选中的商品数量",this.jies,"商品总数量",this.totalCount);
       return this.jies===this.totalCount
    }
  },
  methods:{
    //点击全选框
    checkedAll(){
      this.$store.commit('cart/updateAllState',!this.ischeckedAll)//取反
    },
    //结算
     checkout(){
      if(this.ountnu===0) return this.$showMessage('请勾选商品')
      if(!this.fullAddress) return this.$showMessage('请输入地址')
      if(!this.token) return  this.delayNavigate()//没登陆调用这个方法跳转到登录页
      // console.log("地址",this.address,"token",this.token,"商品数量",this.ountnu.length);
       // 4. 微信支付
      this.payOrder()
    },
    //
    delayNavigate(){
    this.seconds=3

    this.$showMessage('请登录再结算'+this.seconds+'秒自动跳转登录页')

    //定时器,一秒触发一次
    this.time=setInterval(() => {
          this.seconds--
          if(this.seconds<=0){
            clearInterval(this.time)
          
            uni.switchTab({ url: '/pages/my/my' })
            //结算登录失效退出当前页面时将页面信息对象存入vuex, 方便登录回跳
            //url: '/pages/cart/cart'购物车页面路径,type: 'tab' 自定义type方便登录页识别是购物车跳过来的
            this.$store.commit('user/setredirectInfo',{url: '/pages/cart/cart',type: 'tab'})
          }else{
    this.$showMessage('请登录再结算'+this.seconds+'秒自动跳转登录页')
          }
        }, 1000);
    },
    //微信支付,接口有问题
   async payOrder(){
       // 1. 创建订单
      // 1.1 发送请求
      //拿到勾选的商品列表,筛选出勾选的商品列表,再用map映射出接口需要的参数
     const goods = this.cartItems.filter(item=>item.goods_state).map(item=>{
        return{
          goods_id:item.goods_id,//商品id
          goods_count:item.goods_count,//商品数量
          goods_price:item.goods_price//商品单价
        }
      });
      //发请求
      const res = await this.$http.post('/my/orders/create',{
    order_price: 0.01,    // 开发期间不填写真实的订单价格，写死订单总价为1分钱
    consignee_addr: this.fullAddress,  // 详细收获地址
    goods//勾选的商品列表
      })
      console.log('接口有问题无法获取订单编号',res);
      //获取token接口有问题拿不到token,获取订单编号接口也有问题获取不了订单编号
    }
  }
};
</script>

<style lang="scss">
.my-checkout-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100rpx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10rpx;
  font-size: 28rpx;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-checkout {
    height: 100rpx;
    min-width: 200rpx;
    background-color: #c00000;
    color: white;
    line-height: 100rpx;
    text-align: center;
    padding: 0 20rpx;
  }
}
</style>